<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link id="link" href="css2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
  window.onload = function () {
    // 页面加载完成才执行
    // 点击按钮的时候把link标签里的href属性修改了
    // 1、找对象
    var btns = document.querySelectorAll('.btn1')
    var link = document.querySelector('#link')
    // 2、给按钮写点击事件
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        // this 就是当前事件触发对象，也就是正在点的那个btn
        // 可以根据自定义属性去修改link了
        var file = this.getAttribute('data-cn')
        console.log(file)
        link.href = file + '.css'
      }
    }
  }
</script>
<dl id="message">
	<form>
		<dt>
			<strong>可以换肤的提交框：</strong>
			<input class="btn1" data-cn="css1" type="button" value="皮肤1" />
			<input class="btn1" data-cn="css2" type="button" value="皮肤2" />
		</dt>
		<dd>输入姓名：<input class="text" type="text" /></dd>
		<dd>输入密码：<input class="text" type="password" /></dd>
		<dd>请您留言：<textarea></textarea></dd>
		<dd class="center"><input class="btn" type="submit" value="提交" /></dd>
	</form>
</dl>

</body>
</html>
